<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>QARobot</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <style>
ul{
  list-style: none;
  margin: 0; 
  padding: 0; 
  width: 100%
}
.msgcontents {
  width: auto;
  min-width: 30px;
  min-height: 30px;
  max-width: 50%;
  height: auto;
  word-break: break-all;
  margin: 5px;
  padding: 8px 16px;
}

.left {
  clear: both;
  float: left;
  text-align: left;
  background-color: white;
  border-radius: 15px 15px 15px 5px;
}

.right {
  float: right;
  text-align: left;
  color: white;
  background-color: rgb(80, 75, 75);
  border-radius: 15px 15px 5px 15px;
}
  </style>
  <script>
    function sendmsg1()
    {
        var oul = document.createElement("ul");
        var oLi = document.createElement('div'); 
        oLi.innerHTML="<li class='msgcontents left'>\
        可以通过 疾病名称+病因、预防进行查询<br/>\
        如:<br/>\
        感冒的原因有哪些？<br/>\
        你好，我最近有一点发烧，还有一点咳嗽，还有一点头痛。如何预防感冒？</li>"
        oul.appendChild(oLi);
        document.getElementById("content").appendChild(oul);
        var textArea = document.getElementById("content");
        textArea.scrollTop = textArea.scrollHeight;
    }

    function sendmsg2(){
        var oul = document.createElement("ul");
        var oLi = document.createElement('div'); 
        oLi.innerHTML="<li class='msgcontents left'>\
        可以通过 疾病名称 + 科室进行查询<br/>\
        如:<br/>\
        感冒该挂哪科？</li>"
        oul.appendChild(oLi);
        document.getElementById("content").appendChild(oul);
        var textArea = document.getElementById("content");
        textArea.scrollTop = textArea.scrollHeight;
    }

    function sendmsg3(){
        var oul = document.createElement("ul");
        var oLi = document.createElement('div'); 
        oLi.innerHTML="<li class='msgcontents left'>可以通过 疾病名称+方向+注意事项进行查询<br/>\
        如:<br/>\
        感冒饮食有哪些注意事项?</li>"
        oul.appendChild(oLi);
        document.getElementById("content").appendChild(oul);
        var textArea = document.getElementById("content");
        textArea.scrollTop = textArea.scrollHeight;
    }

    function sendmsg4(){
        var oul = document.createElement("ul");
        var oLi = document.createElement('div'); 
        oLi.innerHTML="<li class='msgcontents left'>你好，开始聊天吧</li>"
        oul.appendChild(oLi);
        document.getElementById("content").appendChild(oul);
        var textArea = document.getElementById("content");
        textArea.scrollTop = textArea.scrollHeight;
    }
  </script>
</body>

</html>